import { FC } from "react";
import type { FormProps } from "antd";
import { Button, Form, Input, message, Select } from "antd";
import { httpPost } from "../../../util/httpUtil";

type FieldType = {
  title?: string;
  choiceA?: string;
  choiceB?: string;
  choiceC?: string;
  choiceD?: string;
  answer?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
  var select = values.answer;
  if(select === "A"){
    values.answer = values.choiceA;
  }else if(select === "B"){
    values.answer = values.choiceB;
  }else if(select === "C"){
    values.answer = values.choiceC;
  }else if(select === "D"){
    values.answer = values.choiceD;
  }
  httpPost("/problem/submitProblem", {
    title: values.title,
    type: "choice",
    content: values,
  });
  message.success("新增题目成功");
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
  message.error("新增题目失败"+errorInfo);
};

const onChange = (value: string) => {
  console.log(value);
};



const SubmitChoice: FC = () => {
  return (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 40 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="题目"
          name="title"
          rules={[{ required: true, message: "请输入题目!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项A"
          name="choiceA"
          rules={[{ required: true, message: "请输入选项A!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项B"
          name="choiceB"
          rules={[{ required: true, message: "请输入选项B!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项C"
          name="choiceC"
          rules={[{ required: true, message: "请输入选项C!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项D"
          name="choiceD"
          rules={[{ required: true, message: "请输入选项D!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="答案"
          name="answer"
          rules={[{ required: true, message: "请输入答案!" }]}
        >
          <Select
            placeholder="请选择答案选项"
            optionFilterProp="label"
            onChange={onChange}
            options={[
              { value: "A", label: "选项A" },
              { value: "B", label: "选项B" },
              { value: "C", label: "选项C" },
              { value: "D", label: "选项D" }
            ]}
          />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交题目
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default SubmitChoice;
